<template>
	<view class="page">
		<pageTxt>
			<z-paging ref="paging" refresher-only @onRefresh="onRefresh" :paging-style="{ 'background-color': '#f7f7f7', height: '100%', width: '100%' }">
				<!-- 头部 -->
				<template slot="top">
					<u-navbar title="整改单详情" :autoBack="true" :fixed="false"></u-navbar>
					<view class="tab-box">
						<u-tabs
							:current="tabIndex"
							@click="tabClickFunc"
							:list="tablist"
							inactiveStyle="color: #919092;"
							activeStyle="color: #3B75FF;"
							lineColor="#3B75FF"
						></u-tabs>
					</view>
				</template>
				<!-- 内容 -->
				<view class="detail-content-box" v-if="dataObj">
					<!-- 详情 -->
					<template v-if="tabIndex == 0">
						<u-empty
							v-if="!$fieldShowFunc('24-xmxx') && !$fieldShowFunc('24-zgdxx')"
							marginTop="300rpx"
							icon="https://hzybucket.obs.cn-south-1.myhuaweicloud.com/we_chat/no-msg2.png"
							text=" "
						></u-empty>
						<!-- 项目信息 -->
						<view class="item-box" v-if="$fieldShowFunc('24-xmxx')">
							<view class="title">项目信息</view>
							<view class="item-box-item flex jb" v-if="$fieldShowFunc('zgd_xmmc')">
								<text class="txt">项目名称</text>
								<view class="content">
									{{ dataObj.project_name || '--' }}
								</view>
							</view>
							<view class="item-box-item flex jb" v-if="$fieldShowFunc('zgd_xmbh')">
								<text class="txt">项目编号</text>
								<view class="content flex ac">
									<text class="txt-btn" @click="navToProjectFunc">
										{{ dataObj.project_number || '--' }}
									</text>
								</view>
							</view>
							<view class="item-box-item flex jb" v-if="$fieldShowFunc('zgd_ysjd')">
								<text class="txt">验收节点</text>
								<view class="content flex ac">
									{{ dataObj.node_name || '--' }}
								</view>
							</view>
							<view class="item-box-item flex jb" v-if="$fieldShowFunc('zgd_xmpp')">
								<text class="txt">项目品牌</text>
								<view class="content flex ac">
									{{ dataObj.brand_name || '--' }}
								</view>
							</view>
							<view class="item-box-item flex jb" v-if="$fieldShowFunc('zgd_xmlx')">
								<text class="txt">项目类型</text>
								<view class="content flex ac">
									{{ dataObj.store_type_name || '--' }}
								</view>
							</view>
						</view>
						<!-- 整改单信息 -->
						<view class="item-box" v-if="$fieldShowFunc('24-zgdxx')">
							<view class="title">整改单信息</view>
							<view class="item-box-item flex jb" v-if="$fieldShowFunc('zgd_zgnr')">
								<text class="txt">整改内容</text>
								<view class="content flex ac">
									{{ dataObj.rectification_content || '--' }}
								</view>
							</view>
							<view class="item-box-item flex jb" v-if="$fieldShowFunc('zgd_tp')">
								<text class="txt">图片</text>
								<view class="content flex ac flex">
									<image
										v-for="(file, idx) in dataObj.pending_rectification_files"
										:key="idx"
										:src="$fileImgFunc(file)"
										@click="previewFunc(file)"
										mode="aspectFill"
										class="img-box"
									></image>
								</view>
							</view>
							<view class="item-box-item flex jb" v-if="$fieldShowFunc('zgd_zgqy')">
								<text class="txt">整改区域</text>
								<view class="content flex ac">
									<template v-if="dataObj.rectification_area == 1">前区</template>
									<template v-if="dataObj.rectification_area == 2">后区</template>
									<template v-if="dataObj.rectification_area == 3">仓库</template>
								</view>
							</view>
							<view class="item-box-item flex jb" v-if="$fieldShowFunc('zgd_zglx')">
								<text class="txt">整改类型</text>
								<view class="content flex ac">
									<template v-if="dataObj.rectification_type == 1">水电</template>
									<template v-if="dataObj.rectification_type == 2">吊顶</template>
									<template v-if="dataObj.rectification_type == 3">门头</template>
								</view>
							</view>
							<view class="item-box-item flex jb" v-if="$fieldShowFunc('zgd_sfyxky')">
								<text class="txt">是否影响开业</text>
								<view class="content flex ac">
									{{ dataObj.is_affect_opening == 1 ? '是' : '否' }}
								</view>
							</view>
							<view class="item-box-item flex jb" v-if="$fieldShowFunc('zgd_xqzgsj')">
								<text class="txt">限期整改日期</text>
								<view class="content flex ac">
									{{ dataObj.deadline_rectification || '--' }}
								</view>
							</view>
							<view class="item-box-item flex jb" v-if="$fieldShowFunc('zgd_yzgms')">
								<text class="txt">已整改描述</text>
								<view class="content flex ac">
									{{ dataObj.rectification_description || '--' }}
								</view>
							</view>
							<view class="item-box-item flex jb" v-if="$fieldShowFunc('zgd_yzgzpsp')">
								<text class="txt">已整改照片/视频</text>
								<view class="content flex ac flex">
									<image
										v-for="(file, idx) in dataObj.rectified_files"
										:key="idx"
										:src="$fileImgFunc(file)"
										@click="previewFunc(file)"
										mode="aspectFill"
										class="img-box"
									></image>
								</view>
							</view>
							<view class="item-box-item flex jb" v-if="$fieldShowFunc('zgd_zgjg')">
								<text class="txt">整改结果</text>
								<view class="content flex ac">
									<template v-if="dataObj.rectification_status == 10">待整改</template>
									<template v-if="dataObj.rectification_status == 20">审核中</template>
									<template v-if="dataObj.rectification_status == 30">已完成</template>
								</view>
							</view>
							<view class="item-box-item flex jb" v-if="$fieldShowFunc('zgd_zgwcsj')">
								<text class="txt">整改完成时间</text>
								<view class="content flex ac">
									{{ dataObj.completion_at || '--' }}
								</view>
							</view>
						</view>
					</template>
					<!-- 历史信息 -->
					<template v-if="tabIndex == 1">
						<view class="item-box">
							<u-empty v-if="!logList.length" marginTop="300rpx" icon="https://hzybucket.obs.cn-south-1.myhuaweicloud.com/we_chat/no-msg2.png" text=" "></u-empty>
							<u-steps current="0" direction="column" dot activeColor="#3b75ff" inactiveColor="#3b75ff">
								<u-steps-item v-for="(item, index) in logList" :key="index">
									<template slot="desc">
										<view class="steps-title flex ac jb">
											<view class="steps-title-title">{{ item.updated_at }}</view>
											<view class="steps-title-user-data-box flex ac jc">
												<image class="avater-box" :src="item.handlers_image" mode="aspectFit"></image>
												<view class="user-name u-line-1">
													{{ item.handlers_name + '-' + item.handlers_position }}
												</view>
											</view>
										</view>
										<view class="steps-desc">
											<view class="steps-desc-title">
												{{ item.content }}
											</view>
											<!-- 工程监理发起整改单 -->
											<template v-if="item.status == 3100">
												<view class="steps-desc-box flex ac" v-if="$fieldShowFunc('zgd_zgnr')">
													<view class="steps-desc-box-title">整改内容</view>
													<view class="steps-desc-box-desc">
														{{ item.form_data.rectification_content || '--' }}
													</view>
												</view>
												<view class="steps-desc-box flex ac" v-if="$fieldShowFunc('zgd_zgqy')">
													<view class="steps-desc-box-title">整改区域</view>
													<view class="steps-desc-box-desc">
														<template v-if="item.form_data.rectification_area == 1">前区</template>
														<template v-if="item.form_data.rectification_area == 2">后区</template>
														<template v-if="item.form_data.rectification_area == 3">仓库</template>
														<template v-if="!item.form_data.rectification_area">--</template>
													</view>
												</view>
												<view class="steps-desc-box flex ac" v-if="$fieldShowFunc('zgd_zglx')">
													<view class="steps-desc-box-title">整改类型</view>
													<view class="steps-desc-box-desc">
														<template v-if="item.form_data.rectification_type == 1">水电</template>
														<template v-if="item.form_data.rectification_type == 2">吊顶</template>
														<template v-if="item.form_data.rectification_type == 3">门头</template>
														<template v-if="!item.form_data.rectification_type">--</template>
													</view>
												</view>
												<view class="steps-desc-box flex ac" v-if="$fieldShowFunc('zgd_sfyxky')">
													<view class="steps-desc-box-title">是否影响开业</view>
													<view class="steps-desc-box-desc">
														{{ item.form_data.is_affect_opening == 1 ? '是' : '否' }}
													</view>
												</view>
												<view class="steps-desc-box flex ac" v-if="$fieldShowFunc('zgd_xqzgsj')">
													<view class="steps-desc-box-title">限期整改日期</view>
													<view class="steps-desc-box-desc">
														{{ item.form_data.deadline_rectification || '--' }}
													</view>
												</view>
												<view class="steps-desc-box" v-if="$fieldShowFunc('zgd_tp')">
													<view class="steps-desc-box-title">图片</view>
													<view class="steps-desc-box-desc">
														<image
															v-for="(file, fileIndex) in item.form_data.rectification_file"
															:key="fileIndex"
															class="img-box"
															:src="$fileImgFunc(file)"
															@click="previewFunc(file)"
														></image>
														<template v-if="!item.form_data.rectification_file.length">--</template>
													</view>
												</view>
											</template>
											<!-- 工程经理上传整改内容 -->
											<template v-if="item.status == 3105">
												<view class="steps-desc-box flex ac" v-if="$fieldShowFunc('zgd_yzgms')">
													<view class="steps-desc-box-title">已整改描述</view>
													<view class="steps-desc-box-desc">
														{{ item.form_data.rectification_description || '--' }}
													</view>
												</view>
												<view class="steps-desc-box" v-if="$fieldShowFunc('zgd_tp')">
													<view class="steps-desc-box-title">图片</view>
													<view class="steps-desc-box-desc">
														<image
															class="img-box"
															v-for="(file, fileIndex) in item.form_data.rectification_file"
															:key="fileIndex"
															:src="$fileImgFunc(file)"
															@click="previewFunc(file)"
														></image>
														<template v-if="!item.form_data.rectification_file.length">--</template>
													</view>
												</view>
											</template>
											<!-- 工程监理审核-不通过 -->
											<template v-if="item.status == 3110">
												<view class="steps-desc-box flex ac">
													<view class="steps-desc-box-title">审批意见</view>
													<view class="steps-desc-box-desc">
														{{ item.form_data.reason_refusal || '--' }}
													</view>
												</view>
											</template>
											<!-- 工程监理审核-通过 -->
											<template v-if="item.status == 3115">
												<view class="steps-desc-box flex ac">
													<view class="steps-desc-box-title">审批意见</view>
													<view class="steps-desc-box-desc">
														{{ item.form_data.reason_refusal || '--' }}
													</view>
												</view>
											</template>
										</view>
									</template>
								</u-steps-item>
							</u-steps>
						</view>
					</template>
				</view>
				<view class="bottom-btn-box flex ac jb" slot="bottom">
					<view style="width: 100%" v-if="!loading">
						<judgeBtn info :per_arr="per_arr" :btns="btns" :state="dataObj.rectification_status" :item="dataObj" @change="btnsChange"></judgeBtn>
					</view>
				</view>
			</z-paging>
		</pageTxt>
		<!-- 文件预览 -->
		<preFileCom :fileObj="fileObj" @onFileSuccess="fileObj = ''"></preFileCom>
		<!-- 操作组件 -->
		<engineeringRectificationOperate :value.sync="per_name" :oper_item="oper_item" @submit="handleSubmit"></engineeringRectificationOperate>
	</view>
</template>

<script>
export default {
	provide() {
		return {
			providedData: this.btns
		};
	},
	data() {
		return {
			fileObj: '',
			loading: false,
			dataObj: '',
			tabIndex: 0,
			tablist: [
				{
					name: '详情'
				},
				{
					name: '历史记录'
				}
			],
			logList: [],
			per_arr: [], //权限列表
			// 操作按钮
			btns: [
				{
					per_name: 'rectificationForm_submit',
					state: 10,
					name: '上传整改内容'
				},
				{
					per_name: 'rectificationForm_examine',
					state: 20,
					name: '审核整改单'
				}
			],
			// 操作相关
			per_name: '',
			oper_item: {}
		};
	},
	onLoad(option) {
		this.getRectificationDetails(option.id);
		// 获取权限
		this.$Api
			.getHtmlAuthority({
				path: '/rectificationForm'
			})
			.then((res) => {
				console.log(res, 'getHtmlAuthority');
				if (res.code == 200) {
					this.per_arr = res.data.permission;
				}
			});
	},
	onShow() {
		if (this.dataObj) {
			this.getRectificationDetails(this.dataObj.id);
		}
	},
	methods: {
		// 操作反馈
		handleSubmit(e) {
			this.onRefresh();
		},
		// 操作事件
		btnsChange(e) {
			console.log(e);
			this.per_name = e.per_name;
			this.oper_item = e.item;
		},
		onRefresh() {
			this.getRectificationDetails(this.dataObj.id);
			this.$refs.paging.complete();
		},
		tabClickFunc(e) {
			this.tabIndex = e.index;
		},
		// 预览
		previewFunc(item) {
			console.log(item, '1111');
			this.fileObj = item;
		},
		clikcFunc2(e) {
			console.log(e);
		},
		// 详情
		getRectificationDetails(rectification_id) {
			this.loading = true;
			this.$Apipc
				.getRectificationDetails({
					rectification_id
				})
				.then((res) => {
					console.log(res, '整改单详情');
					this.loading = false;
					if (res.code == 200) {
						res.data.log_list.forEach((item) => {
							item.form_data = JSON.parse(item.form_data);
						});
						this.logList = res.data.log_list || [];
						this.dataObj = res.data;
					}
				});
		},
		// 去详情项目
		navToProjectFunc() {
			uni.navigateTo({
				url: '/pagesB/projectDetail/projectDetail?id=' + this.dataObj.project_id
			});
		}
	}
};
</script>

<style lang="scss" scoped></style>
